<template>
  <div class="layui-form layui-form-pane layui-tab-item layui-show">
    <ValidationObserver ref="observer" v-slot="{validate}">
    <form action="/user/repass" method="post">
      <div class="layui-form-item">
        <ValidationProvider rules="required|min:6" v-slot="{ errors }">
        <label for="L_nowpass" class="layui-form-label">当前密码</label>
        <div class="layui-input-inline">
          <input
            type="password"
            name="oldpass"
            v-model="oldpass"
            class="layui-input"
          />
        </div>
        <div class="layui-form-mid form-error">{{ errors[0] }}</div>
        </ValidationProvider>
      </div>
      <div class="layui-form-item">
        <ValidationProvider rules="required|min:6|max:16|confirmed:conpass"  v-slot="{ errors }">
        <label for="L_pass" class="layui-form-label">新密码</label>
        <div class="layui-input-inline">
          <input
            type="password"
            id="L_pass"
            name="newpass"
            v-model="newpass"
            class="layui-input"
          />
        </div>
        <div class="layui-form-mid layui-word-aux">6到16个字符</div>
        <div class="layui-form-mid form-error">{{ errors[0] }}</div>
        </ValidationProvider>
      </div>
      <div class="layui-form-item">
        <ValidationProvider name="密码" rules="required|min:6|max:16" vid="conpass" v-slot="{ errors }">
        <label for="L_repass" class="layui-form-label">确认密码</label>
        <div class="layui-input-inline">
          <input
            type="password"
            id="L_repass"
            name="conpass"
            v-model="conpass"
            class="layui-input"
          />
        </div>
        <div class="layui-form-mid form-error">{{ errors[0] }}</div>
        </ValidationProvider>
      </div>
      <div class="layui-form-item">
        <button class="layui-btn" type="button" @click="validate().then(submit)">确认修改</button>
      </div>
    </form>
    </ValidationObserver>
  </div>
</template>

<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate'
import { changePass } from '@/api/user'
export default {
  name: 'passwd',
  components: {
    ValidationProvider,
    ValidationObserver
  },
  data () {
    return {
      oldpass: '',
      newpass: '',
      conpass: ''
    }
  },
  methods: {
    async submit () {
      const valid = await this.$refs.observer.validate()
      if (!valid) {
        return
      }
      if (this.oldpass === this.newpass) {
        this.$pop('shake', '新旧密码不能一致')
        return
      }
      const res = await changePass({
        oldpass: this.oldpass,
        newpass: this.newpass
      })
      if (res.code === 200) {
        this.$alert('更新密码成功')
        this.oldpass = ''
        this.newpass = ''
        this.conpass = ''
        requestAnimationFrame(() => {
          this.$refs.observer.reset()
        })
      } else {
        this.$alert(res.msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
